<template>
  <div class="questions-choice-container">
    <el-card>
      <!-- 新增试题 -->
      <div class="header">
        <span>说明：目前支持学科和关键字条件筛选</span>
        <el-button type="success" @click="$router.push('/questions/new')"
          ><i class="el-icon-edit"></i> 新增试题</el-button
        >
      </div>
      <!-- 搜索 -->
      <el-row :gutter="0">
        <el-form
          ref="formRef"
          :model="form"
          :rules="rules"
          size="small"
          label-width="80px"
        >
          <el-col :span="6">
            <el-form-item label="学科" prop="discipline">
              <el-select
                v-model="form.discipline"
                placeholder="请选择"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in allInfo"
                  :key="index"
                  :label="item.subject"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录" prop="directory">
              <el-select
                v-model="form.directory"
                placeholder="请选择"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in allInfo"
                  :key="index"
                  :label="item.catalog"
                  :value="item.id"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签" prop="label">
              <el-select
                v-model="form.label"
                placeholder="请选择"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in allInfo"
                  :key="index"
                  :label="item.tags"
                  :value="item.id"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键词" prop="keywords">
              <el-input
                v-model="form.keywords"
                placeholder="根据题干搜索"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="试题类型" prop="type">
              <el-select
                v-model="form.type"
                placeholder="请选择"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in questionType"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度" prop="difficulty">
              <el-select
                v-model="form.difficulty"
                placeholder="请选择"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in difficulty"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向" prop="direction">
              <el-select
                v-model="form.direction"
                placeholder="请选择"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in direction"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人" prop="Entryperson">
              <el-select
                v-model="form.Entryperson"
                placeholder="请选择"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in allInfo"
                  :key="index"
                  :label="item.creator"
                  :value="item.id"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="题目备注" prop="remarks">
              <el-input
                v-model="form.remarks"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称" prop="abbreviation">
              <el-input
                v-model="form.abbreviation"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3" style="margin-left: 30px">
            <el-form-item label-width="50px" label="城市" prop="city1">
              <el-select
                v-model="form.city1"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in allInfo"
                  :key="index"
                  :label="item.province"
                  :value="item.id"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3" style="margin-left: -30px">
            <el-form-item label-width="50px" label="" prop="city2">
              <el-select
                v-model="form.city2"
                placeholder="请选择"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in allInfo"
                  :key="index"
                  :label="item.city"
                  :value="item.id"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item size="large" style="float: right">
              <el-button size="mini" @click="resetForm">清除</el-button>
              <el-button size="mini" type="primary" @click="submitForm"
                >搜索</el-button
              >
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <!-- 4个功能切换 -->
      <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部" name="all">
          <questions-table
            :allInfo="allInfo"
            :counts="counts"
          ></questions-table>
        </el-tab-pane>

        <el-tab-pane label="待审核" name="toreviewed">
          <questions-table
            :allInfo="allInfo"
            :counts="counts"
          ></questions-table>
        </el-tab-pane>
        <el-tab-pane label="已审核" name="reviewed">
          <questions-table
            :allInfo="allInfo"
            :counts="counts"
          ></questions-table>
        </el-tab-pane>
        <el-tab-pane label="已拒绝" name="rejected">
          <questions-table
            :allInfo="allInfo"
            :counts="counts"
          ></questions-table>
        </el-tab-pane>
      </el-tabs>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="sizes, prev, pager, next, jumper"
          :page-sizes="[5, 10, 15]"
          :page-size="pageInfo.pagesize"
          :total="counts"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { difficulty, questionType, direction } from '@/api/hmmm/constants.js'
import { choice } from '@/api/hmmm/questions.js'
import QuestionsTable from '../components/questions-table.vue'
export default {
  data () {
    return {
      form: {
        discipline: undefined,
        directory: undefined,
        label: undefined,
        keywords: undefined,
        type: undefined,
        difficulty: undefined,
        direction: undefined,
        Entryperson: undefined,
        remarks: undefined,
        abbreviation: undefined,
        city1: undefined,
        city2: undefined
      },
      rules: {
        discipline: [],
        directory: [],
        label: [],
        keywords: [],
        type: [],
        difficulty: [],
        direction: [],
        Entryperson: [],
        remarks: [],
        abbreviation: [],
        city: [],
        field112: []
      },
      difficulty: [], // 困难
      questionType: [], // 题型
      direction: [], // 方法

      activeName: 'all', // 默认显示
      allInfo: [], // 所有的信息
      counts: 0, // 总计数
      // 分页信息
      pageInfo: { page: 1, pagesize: 5 }
    }
  },
  components: { QuestionsTable },
  watch: {},
  async created () {
    try {
      const { data } = await choice()
      this.allInfo = data.items
      this.counts = data.counts
      console.log(data)
    } catch (error) {
      console.log(error)
    }

    this.difficultys()
    this.questionTypes()
    this.directions()
  },
  mounted () { },
  methods: {
    // 查询的几种状态
    difficultys () {
      this.difficulty = difficulty
    },
    questionTypes () {
      this.questionType = questionType
    },
    directions () {
      this.direction = direction
    },
    // 点击切换状态
    async handleClick (tab, event) {
      // 点击切换
      const { data } = await choice({ chkState: tab.index - 1 })
      this.allInfo = data.items
      this.counts = data.counts
    },
    choiceAll () {
      return choice({ ...this.pageInfo, ...this.form, chkState: tab.index - 1 })
    },
    // 设置页面每页的数量
    async handleSizeChange (val) {
      this.pageInfo.pagesize = val
      // 从新获取页面目录
      const { data } = await choice(this.pageInfo)
      this.allInfo = data.items
    },
    // 当前点击的页面
    async handleCurrentChange (val) {
      this.pageInfo.page = val
      // 从新获取页面目录
      const { data } = await choice(this.pageInfo)
      this.allInfo = data.items
    },
    // 搜索
    async submitForm () {
      const { data } = await choice(this.form)
      this.allInfo = data.items
      this.counts = data.counts
    },
    // 重置
    resetForm () {
      this.$refs.formRef.resetFields()
    }
  }
}
</script>

<style scoped lang='less'>
.questions-choice-container {
  padding: 10px;
  .header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    span {
      color: #ffc0cb;
      font-size: 12px;
    }
    .el-icon-edit {
      margin-right: 5px;
    }
  }
}
</style>
